import React from 'react'
import EchartsForReact from 'echarts-for-react'
// 加载主题文件信息的对象
import theme from '../../../style/theme/echarts-theme'

const MonitorChart4 = props => {

    function getOption() {
        let option = {
            title: {
                text: "PMML/服务历史趋势图",
                textStyle: {
                    fontSize: 15
                },
                top: 5,
                left: 5
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                },
                right: 5,
                top: 5
            },
            legend: {
                top: 35,
                data: ['PMML数量', '服务数量', 'PMML使用数', '服务运行数']
            },
            grid: {
                height: 220
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '数量',
                    min: 0,
                    max: 100,
                    interval: 50,
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: 'PMML数量',
                    type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name: '服务数量',
                    type: 'bar',
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                    name: 'PMML使用数',
                    type: 'line',
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                },
                {
                    name: '服务运行数',
                    type: 'line',
                    data: [3.0, 4.2, 6.3, 3.5, 6.3, 8.2, 20.3, 33.4, 43.0, 26.5, 22.0, 6.2]
                }
            ]
        }
        return option
    }

    return (
        <div>
            <EchartsForReact 
                option={getOption()}
                theme={theme}
            />
        </div>
    )
}

export default MonitorChart4